<template>
    <view class="content">
        <view class="top">
        	<view class="title">{{data.name}}</view>
        	<view class="add">
        		<view class="u-flex-1">
        			<view class="distance" v-if="data.distance">距您 {{data.distance}}</view>
        			<view>{{data.address}}</view>
        		</view>
        		<image src="../../static/image/add.png" class="add-icon"></image>
        	</view>
        </view>
		
		<view class="info">
			<view class="info-top">
				<view class="yu">预约时间</view>
				<view class="u-flex" @click="openPop">
					<view>{{ time || '请选择时间' }}</view>
					<u-icon name="arrow-right" color="#919191" size="28" class="u-m-l-10"></u-icon>
				</view>
			</view>
			<!-- 1男 0女 -->
			<view class="info-cen">
				<view class="name">{{card.nickname}}</view>
				<view>{{card.sex == 1 ? '男' : '女'}}</view>
				<view class="taocan">{{checkName}}</view>
			</view>
			<view class="info-down" v-if="card.sex == 0">
				<view class="info-down-l">涉及妇科检查，<br/>请勾选</view>
				<view class="u-flex" @click="check(1)">
					<image :src="is_sex == 1 ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" class="choose-1"></image>
					<view>
						<view>有性生活史</view>
						<view class="num">({{totalPrice}})</view>
					</view>
				</view>
				<view class="u-flex" @click="check(0)">
					<image :src="is_sex == 0 ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" class="choose-1"></image>
					<view>
						<view>无性生活史</view>
						<view class="num">({{untotalPrice}})</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="item" v-for="(nitem, nindex) in list" :key="nindex" @click="choose(nitem)">
			<image :src="nitem.isSelect ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" 
				class="choose-1 u-m-t-30"></image>
			<view class="item-right">
				<view class="item-top">
					<view class="i-name">{{nitem.name}}</view>
					<view class="more" @click.stop="toDetails(nitem)">
						查看详情
						<u-icon name="arrow-right" color="#919191" size="28" class="u-m-l-10"></u-icon>
					</view>
				</view>
				<view class="item-down" v-if="nitem.child && nitem.child.length > 0">
					<view class="text" v-for="(el, ind) in nitem.child" :key="ind">{{el.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="f-tip">
				<u-parse :html="content.content"></u-parse>
			</view>
			<view class="f-down">
				<view class="u-flex" v-if="card.sex == 1">
					<view class="f-down-l">
						<view class="price">￥<text class="price-num">{{totalPrice}}</text></view>
						<view>{{pay_type_txt}}</view>
					</view>
					<view class="f-down-r">
						<view class="line-price">￥<text>{{totalPriceLine}}</text></view>
						<view>门市价</view>
					</view>
				</view>
				
				<view class="u-flex" v-if="card.sex == 0">
					<view class="f-down-l">
						<view class="price">￥<text class="price-num">{{is_sex == 1 ? totalPrice : untotalPrice}}</text></view>
						<view>{{pay_type_txt}}</view>
					</view>
					<view class="f-down-r">
						<view class="line-price">￥<text>{{ is_sex == 1 ? totalPriceLine : untotalPriceLine}}</text></view>
						<view>门市价</view>
					</view>
				</view>
				
				<view class="f-btn" @click="doSubmit">提交预约</view>
			</view>
		</view>
		
		<!-- <u-picker v-model="show" mode="time" @confirm="confirmTime"></u-picker> -->
		
		<u-popup v-model="show" mode="bottom">
			<view class="u-p-30">
				<view class="pop-btn">
					<view @click="show = false">取消</view>
					<view class="text-cyan" @click="confirmT">确定</view>
				</view>
			    <view>
					 <gwbq-calendar 
						:date="date"
						ref="calendar"
					    :insert="show"
					    :lunar="true" 
						:clearDate="false"
					    :start-date="startdate"
					    :end-date="enddate"
					    @change="change"
					     />
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				show: false,
				ctime: '',
                time: '',
				data: {},
				card: {},
				card_id: '',//健康卡编号
				center_id: '',//体检中心编号
				content: {},
				list: [],
				checkName: '',//套餐名
				totalPrice: 0,
				totalPriceLine: 0,
				untotalPrice: 0,
				untotalPriceLine: 0,
				pay_type_txt: '',
				is_sex: 1,//0-无 1-有
				startdate: '',//start
				enddate: '',//end
				date: '',
            };
        },
        onLoad(option) {
			const currentDate = new Date();
			const year = currentDate.getFullYear();
			const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
			const day = currentDate.getDate() + 1
			this.startdate = year + '-' + month + '-' + day
			this.enddate = year + '-' + (month + 1) + '-' + day
			this.date = this.startdate
			
            if (option.card_id) { this.card_id = option.card_id }
			if (option.center_id) { this.center_id = option.center_id }
			
			this.$getLocation((latitude,longitude) => {
			    console.log('000',latitude, longitude)
			    let lat = latitude
				let log = longitude
				
				this.getData(lat,log)
			})
			this.getCard()
			
			this.getContent()
        },
        methods: {
			openPop(){
				this.show = true
				this.$refs.calendar.open();
			},
			change(e) {
				console.log('change',e);
				this.ctime = e.fulldate
			},
			confirmT() {
				this.time = this.ctime
				this.show = false
				this.date = this.time
			},
			
			
            doSubmit() {
				if (!this.time) {
					this.$toast('请选择预约时间')
					return
				}
				let thalis_id = ''
				this.list.forEach((item, index) => {
					if (item.isSelect) {
						thalis_id = item.id
					}
				})
				if (!thalis_id) {
					this.$toast('请选择体检套餐')
					return
				}
				this.$ajax('add_subscribes', {
				    userToken: this.$getSync('userToken'),
					center_id: this.center_id,//体检中心编号
					thalis_id: thalis_id,//体检套餐编号
					card_id: this.card_id,//健康卡编号
					subscribe_time: this.time,//预约时间
					is_sex: this.is_sex,//0-无 1-有
				}).then(ret => {
					if (ret.status == 0) {
						if (ret.data.pay_status == 0) {
							this.$cTo(`./destined-4?subscribes_id=${ret.data.subscribes_id}`)
						} else {
							this.$toast('提交成功')
							setTimeout(() => {
								this.$sTo(`/pages/tabbar/index`)
							}, 500)
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			confirmTime(e) {
				console.log(e)
				this.time = e.year + '-' + e.month + '-' + e.day
			},
			
			toDetails(item) {
				this.$gTo(`/pages/medical/details?id=${this.center_id}&thalis_id=${item.id}`)
			},
			
			check(num) {
				this.is_sex = num
				
				this.list.forEach((item, index) => {
					if (item.isSelect) {
						this.pay_type_txt = item.pay_type_txt
						this.totalPrice = item.sex_sale_price
						this.totalPriceLine = item.sex_original_price
						
						this.untotalPrice = item.sale_price
						this.untotalPriceLine = item.original_price
					}
				})
			},
			
			choose(item) {
				const nowStatu = item.isSelect
				this.list.forEach(ii => {
				    ii.isSelect = false
				})
				item.isSelect =! nowStatu
				this.checkName = item.name
				this.pay_type_txt = item.pay_type_txt
				
				if (this.card.sex == 1) {
					this.totalPrice = item.man_sale_price
					this.totalPriceLine = item.man_original_price
				} else {
					this.totalPrice = item.sex_sale_price
					this.totalPriceLine = item.sex_original_price
					this.untotalPrice = item.sale_price
					this.untotalPriceLine = item.original_price
				}
			},
			
			// 获取体检套餐
			getList() {
				this.$ajax('get_thalis', {
			        userToken: this.$getSync('userToken'),
					center_id: this.center_id,//体检中心编号
			    }).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
						if (this.list && this.list.length > 0) {
							this.list.forEach((cur, index) => {
								if (index == 0) {
									this.$set(cur, 'isSelect', true)
									this.checkName = cur.name
									this.pay_type_txt = cur.pay_type_txt
									if (this.card.sex == 1) {
										this.totalPrice = cur.man_sale_price
										this.totalPriceLine = cur.man_original_price
									} else {
										this.totalPrice = cur.sex_sale_price
										this.totalPriceLine = cur.sex_original_price
										
										this.untotalPrice = cur.sale_price
										this.untotalPriceLine = cur.original_price
									}
									
								} else {
									this.$set(cur, 'isSelect', false)
								}
							})
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取健康卡详情
			getCard() {
				this.$ajax('get_cards_detail', {
			        userToken: this.$getSync('userToken'),
					card_id: this.card_id,
			    }).then(ret => {
					if (ret.status == 0) {
			            this.card = ret.data
						
						this.getList()
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取体检中心详情
			getData(lat,lng) {
				this.$ajax('get_centers_detail', {
			        userToken: this.$getSync('userToken'),
					centers_id: this.center_id,//体检中心编号
					lat: lat,
					lng: lng,
			    }).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 9,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.pop-btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		font-size: 30rpx;
	}
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx 20rpx 220rpx;
	}
	.top{
		background-color: #01b6bc;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.title{
		font-size: 36rpx;
		color: #fff;
		padding: 36rpx;
	}
	.add{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 35rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 26rpx;
	}
	.distance{
		font-size: 28rpx;
		color: #01b6bc;
	}
	.add-icon{
		width: 67rpx;
		height: 67rpx;
		margin-left: 15rpx;
	}
	
	.info{
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 4rpx 4rpx 20rpx 4rpx;
	}
	.info-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 18rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: linear-gradient(to right,#fff2e5,#fff);
		font-size: 26rpx;
	}
	.yu{
		font-size: 28rpx;
		color: #fff;
		padding: 10rpx 20rpx;
		background: linear-gradient(to right,#fe962d,#fc6810);
		border-radius: 8rpx;
	}
	.info-cen{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 26rpx;
		padding: 40rpx 28rpx 0;
	}
	.name{
		font-size: 34rpx;
		font-weight: bold;
		padding-right: 20rpx;
	}
	.taocan{
		flex: 1;
		padding-left: 15rpx;
		color: #fe952c;
		text-align: right;
	}
	.info-down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx;
		background-color: #f8fafc;
		border-radius: 20rpx;
		margin: 40rpx 16rpx 0;
		font-size: 24rpx;
	}
	.info-down-l{
		color: #808080;
		padding-right: 15rpx;
		border-right: 2rpx solid #dddddd;
	}
	.choose-1{
		width: 35rpx;
		height: 35rpx;
		margin-right: 14rpx;
	}
	.num{
		color: #808080;
	}
	
	.item{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	.item-right{
		flex: 1;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.i-name{
		flex: 1;
		font-size: 30rpx;
		font-weight: bold;
		position: relative;
	}
	.i-name::after{
		display: block;
		content: '';
		width: 8rpx;
		height: 37rpx;
		background-color: #01b6bc;
		border-radius: 0 6rpx 6rpx 0;
		position: absolute;
		left: -30rpx;
		top: 0;
	}
	.more{
		font-size: 24rpx;
		color: #9f9fa0;
	}
	.item-down{
		padding-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.text{
		font-size: 26rpx;
		padding: 10rpx 12rpx;
		background-color: #f1f1f1;
		border-radius: 4rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	
	.footer{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.f-tip{
		font-size: 24rpx;
		color: #fff;
		padding: 20rpx 28rpx;
		background-color: #626262;
	}
	.f-down{
		padding: 18rpx 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.f-down-l{
		font-size: 24rpx;
		color: #fe8928;
	}
	.price{
		font-size: 28rpx;
	}
	.price-num{
		font-size: 40rpx;
		font-weight: bold;
	}
	.f-down-r{
		padding-left: 32rpx;
		font-size: 24rpx;
		color: #898989;
	}
	.line-price{
		text-decoration: line-through;
	}
	.f-btn{
		font-size: 30rpx;
		color: #fff;
		padding: 16rpx 40rpx;
		background-color: #01b6bc;
		border-radius: 50rpx;
	}

</style>
